<template>
  <div class="content-wrap">
    <!-- 基本信息 -->
    <div class="business-info-mod">
      <el-form
        @submit.native.prevent
        ref="shopBasicInfo"
        label-width="140px"
        :model="shopBasicInfo"
        :rules="shopBasicInfoRules"
        size="small"
      >
        <div class="ci-wrapper">
          <div class="left-info">
            <el-form-item
              style="height: 150px; margin: 0 0 0px 0"
              :label="this.$i18n.t('outlet.shopLogo')"
              prop="shopLogo"
              class="shop-logo-class"
            >
              <p class="txt">
                <!-- <ImgUpload
                  v-model="shopBasicInfo.shopLogo"
                  :limit="1"
                  :prompt="false"
                  @input="imgsChange"
                /> -->

                <DirectImgUpload
                  :modelValue.sync="shopBasicInfo.shopLogo"
                  :limit="1"
                  :prompt="false"
                  @input="imgsChange"
                />
              </p>
            </el-form-item>
            <div class="shop-logo-img-tip">
              <span>仅限jpg、png格式、大小不超过2M，仅限一张。</span>
            </div>
            <!-- 门店名称 -->
            <!-- <el-form-item :label="$t('outlet.outletName')" prop="shopName">
              <p class="txt">
                <el-input
                  v-model="shopBasicInfo.shopName"
                  :placeholder="$t('shopProcess.shopLimits')"
                  maxlength="10"
                  @blur="
                    shopBasicInfo.shopName = shopBasicInfo.shopName
                      ? removeHeadAndTailSpaces(shopBasicInfo.shopName)
                      : shopBasicInfo.shopName
                  "
                />
              </p>
            </el-form-item> -->
            <!-- 门店编号 -->
            <el-form-item :label="$t('outlet.outletId')" prop="shopCode">
              <p class="txt">
                <el-input
                  v-model="shopBasicInfo.shopCode"
                  :placeholder="$t('shopProcess.onlyNumber')"
                  maxlength="20"
                  @blur="
                    shopBasicInfo.shopCode = shopBasicInfo.shopCode
                      ? removeHeadAndTailSpaces(shopBasicInfo.shopCode)
                      : shopBasicInfo.shopCode
                  "
                />
              </p>
            </el-form-item>
            <!-- 小程序门店名称 -->
            <el-form-item :label="$t('outlet.shopAppName')" prop="shopAppName">
              <p class="txt">
                <el-input
                  v-model="shopBasicInfo.shopAppName"
                  :placeholder="$t('tip.input')"
                  maxlength="20"
                  @blur="
                    (shopBasicInfo.shopAppName = shopBasicInfo.shopAppName
                      ? removeHeadAndTailSpaces(shopBasicInfo.shopAppName)
                      : shopBasicInfo.shopAppName),
                      (shopBasicInfo.shopName = shopBasicInfo.shopAppName
                        ? removeHeadAndTailSpaces(shopBasicInfo.shopAppName)
                        : shopBasicInfo.shopAppName)
                  "
                />
              </p>
            </el-form-item>

            <el-form-item :label="$t('outlet.shopTypeText')" prop="shopType">
              <p class="txt">
                <el-select
                  filterable
                  v-model="shopBasicInfo.shopType"
                  :placeholder="$t('outlet.shopTypeText')"
                >
                  <el-option
                    v-for="item in shopTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </p>
            </el-form-item>
            <!-- shopShowingType -->
            <el-form-item
              style="margin-bottom: 50px"
              :label="this.$i18n.t('outlet.shopShowingType')"
              prop="shopShowingType"
            >
              <p class="txt">
                <el-radio-group v-model="shopBasicInfo.shopShowingType">
                  <el-radio :label="1">{{
                    $t("outlet.showingType0")
                  }}</el-radio>
                  <el-radio :label="2">{{
                    $t("outlet.showingType1")
                  }}</el-radio>
                  <el-radio :label="3">{{
                    $t("outlet.showingType2")
                  }}</el-radio>
                </el-radio-group>
              </p>
              <p style="font-size: 12px; color: #bbb; line-height: 2">
                提示:<br />门店展示中心:只展示门店信息无商品展示。
                <br />货品展示型门店:门店里可查看商品不支持购买。
                <br />货品正常售卖型门店:门店可查看商品支持购买。
              </p>
            </el-form-item>

            <!-- 承租商名称 -->
            <el-form-item :label="$t('shopProcess.brandName')" prop="brandId">
              <p class="txt">
                <el-select
                  filterable
                  :filter-method="searchBrand"
                  v-el-select-loadmore="loadmore"
                  v-model="selectValue"
                  :placeholder="$t('shopProcess.selectBrand')"
                  @focus="formInitiation"
                  @change="selectChange"
                >
                  <el-option
                    v-for="item in brandList"
                    :key="item.brandId"
                    :label="item.brandName"
                    :value="item.brandId"
                  >
                  </el-option>
                </el-select>
              </p>
            </el-form-item>

            <el-form-item
              :label="this.$i18n.t('outlet.outletLabel')"
              prop="_shopTagId"
            >
              <p class="txt">
                <el-cascader
                  v-model="shopBasicInfo._shopTagId"
                  ref="CascaderShopTagId"
                  :options="shopTagsList"
                  :props="shopTagsListProps"
                  @change="handleShopTagsListChange"
                >
                </el-cascader>
              </p>
            </el-form-item>

            <!-- 品牌tag -->
            <el-form-item :label="$t('outlet.brandTagId')">
              <p class="txt">
                <el-select
                  filterable
                  v-model="shopBasicInfo.brandTagId"
                  :placeholder="$t('outlet.brandTagId')"
                >
                  <el-option
                    v-for="item in brandTagList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </p>
            </el-form-item>

            <!-- 所在地区 -->
            <!-- <el-form-item :label="this.$i18n.t('shopProcess.addr')" prop="currentAddr">
              <p class="txt">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="shopBasicInfo.currentAddr"
                  :options="addrList"
                  :props="addrListTreeProps"
                  :placeholder="this.$i18n.t('shopProcess.addrInputTips')"
                  class="addr-select"
                  @change="handleAddrChange"
                />
              </p>
            </el-form-item> -->

            <!-- <el-form-item :label="this.$i18n.t('shopProcess.addr')" prop="currentAddr">
              <p class="txt">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="shopBasicInfo.currentAddr"
                  :options="addrList"
                  :props="addrListTreeProps"
                  :placeholder="this.$i18n.t('shopProcess.addrInputTips')"
                  class="addr-select"
                  @change="handleAddrChange"
                />
              </p>
            </el-form-item> -->

            <el-form-item
              :label="this.$i18n.t('outlet.shopLocation')"
              prop="airportShopAddressObj"
            >
              <p class="text">
                <el-cascader
                  v-model="
                    shopBasicInfo.airportShopAddressObj.airportShopAddressIds
                  "
                  ref="CascaderShopLocation"
                  :options="shopLocationOptions"
                  :props="shopLocationProps"
                  @change="handleShopLocationChange"
                  class="addr-select"
                />
              </p>
            </el-form-item>

            <!-- 详细地址 -->
            <el-form-item
              :label="this.$i18n.t('shopProcess.detailAddr')"
              prop="shopAddress"
            >
              <p class="txt">
                <el-input
                  v-model="shopBasicInfo.shopAddress"
                  :placeholder="this.$i18n.t('shopProcess.detailAddrInputTips')"
                  maxlength="50"
                  @blur="
                    shopBasicInfo.shopAddress = shopBasicInfo.shopAddress
                      ? removeHeadAndTailSpaces(shopBasicInfo.shopAddress)
                      : shopBasicInfo.shopAddress;
                    shopAddressChange();
                  "
                >
                  <!-- <el-button
                    slot="append"
                    icon="el-icon-location"
                    @click="mapLocation"
                    >{{ $t("platform.location") }}</el-button
                  > -->
                </el-input>
              </p>
            </el-form-item>

            <!-- <el-form-item label="经度" prop="shopLng">
              <p class="txt">
                <el-input
                  type="number"
                  v-model="shopBasicInfo.shopLng"
                  placeholder="longitude"
                ></el-input>
              </p>
            </el-form-item>
            <el-form-item label="纬度" prop="shopLat">
              <p class="txt">
                <el-input
                  type="number"
                  v-model="shopBasicInfo.shopLat"
                  placeholder="latitude"
                ></el-input>
              </p>
            </el-form-item> -->

            <!-- 地图 -->
            <!-- <el-form-item>
              <baidu-map
                style="display: none"
                ref="baiduMp"
                class="map"
                :scroll-wheel-zoom="false"
                :center="center"
                @moving="syncCenterAndZoom"
                @moveend="syncCenterAndZoom"
                @zoomend="syncCenterAndZoom"
                @ready="handler"
                :zoom="zoom"
              >
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <bm-marker
                  :position="center"
                  :dragging="false"
                  @click="infoWindowOpen"
                >
                  <bm-info-window
                    :show="show"
                    @close="infoWindowClose"
                    @open="infoWindowOpen"
                    >{{ $t("shop.storeLocation") }}</bm-info-window
                  >
                </bm-marker>
              </baidu-map>
            </el-form-item> -->
            <!-- 用户名 -->
            <!-- <el-form-item :label="$t('outlet.userName')" prop="userName">
              <p class="txt">
                <el-input
                  v-model="shopBasicInfo.userName"
                  :placeholder="$t('shopProcess.setName')"
                  maxlength="20"
                  @blur="
                    shopBasicInfo.userName = shopBasicInfo.userName
                      ? removeHeadAndTailSpaces(shopBasicInfo.userName)
                      : shopBasicInfo.userName
                  "
                />
              </p>
            </el-form-item> -->
            <!-- 登录密码 -->
            <!-- <el-form-item label="登录密码" prop="password">
              <p class="txt">
                <el-input
                  v-model="shopBasicInfo.password"
                  size="small"
                  type="password"
                  show-password
                  maxlength="16"
                  :placeholder="$t('shopProcess.setPass')"
                  @blur="
                    shopBasicInfo.password = shopBasicInfo.password
                      ? removeHeadAndTailSpaces(shopBasicInfo.password)
                      : shopBasicInfo.password
                  "
                />
              </p>
            </el-form-item> -->
            <!-- 联系人 -->
            <el-form-item :label="$t('brand.contactName')" prop="shopOwner">
              <p class="txt">
                <el-input
                  v-model="shopBasicInfo.shopOwner"
                  :placeholder="$t('brand.contactNameInputTip')"
                  maxlength="30"
                  @blur="
                    shopBasicInfo.shopOwner = shopBasicInfo.shopOwner
                      ? removeHeadAndTailSpaces(shopBasicInfo.shopOwner)
                      : shopBasicInfo.shopOwner
                  "
                />
              </p>
            </el-form-item>
            <!-- 联系方式 -->
            <el-form-item :label="$t('outlet.tel')" prop="tel">
              <p class="txt">
                <el-input
                  maxlength="11"
                  @input="handleInputTel('tel')"
                  v-model="shopBasicInfo.tel"
                  :placeholder="this.$i18n.t('shopProcess.telInputTips')"
                />
              </p>
            </el-form-item>
            <!-- 接受通知手机号 -->
            <!-- <el-form-item
              :label="$t('brand.receiveMobile')"
              prop="receiveMobile"
            >
              <p class="txt">
                <el-input
                  maxlength="11"
                  @input="handleInputTel('receiveMobile')"
                  v-model="shopBasicInfo.receiveMobile"
                  :placeholder="this.$i18n.t('brand.receiveMobileInputTip1')"
                />
              </p>
            </el-form-item> -->
            <!-- 联系邮箱 -->
            <!-- <el-form-item
              :label="this.$i18n.t('shopProcess.email')"
              prop="email"
            >
              <p class="txt">
                <el-input
                  v-model="shopBasicInfo.email"
                  :placeholder="this.$i18n.t('shopProcess.emailInputTips')"
                  maxlength="30"
                />
              </p>
            </el-form-item> -->
            <!-- 营业时间 -->
            <el-form-item :label="$t('outlet.businTime')" prop="openingHours">
              <p class="txt">
                <el-time-picker
                  is-range
                  arrow-control
                  format="HH:mm"
                  value-format="HH:mm"
                  v-model="shopBasicInfo.openingHours"
                  :range-separator="this.$i18n.t('date.tip')"
                  :start-placeholder="this.$i18n.t('shopProcess.startTime')"
                  :end-placeholder="this.$i18n.t('shopProcess.endTime')"
                  :placeholder="$t('platform.seleTimeRange')"
                  @change="openingHourChange"
                />
              </p>
            </el-form-item>
            <!-- 营业状态 -->
            <!-- <el-form-item :label="$t('outlet.businStatus')" prop="shopStatus">
              <p class="txt">
                <el-radio-group v-model="shopBasicInfo.shopStatus">
                  <el-radio label="1">{{ $t("outlet.normal") }}</el-radio>
                  <el-radio label="0">{{ $t("outlet.close") }}</el-radio>
                </el-radio-group>
              </p>
            </el-form-item> -->
            <!-- 门店服务 -->
            <!-- <el-form-item
              style="height: auto; min-height: 55px"
              :label="$t('outlet.outletService')"
              prop="serviceIds"
            >
              <p style="height: auto; line-height: 55px; min-height: 55px">
                <el-checkbox-group
                  v-if="serviceTypeArr && serviceTypeArr.length"
                  v-model="shopBasicInfo.serviceIds"
                >
                  <el-checkbox
                    v-for="(item, index) in serviceTypeArr"
                    :label="item.id"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
                <span v-else> -- </span>
              </p>
            </el-form-item> -->
          </div>
        </div>
      </el-form>
    </div>

    <div class="foot-btn">
      <!-- <el-button type="infor" size="small" @click="backPage">{{
        $t("shop.return")
      }}</el-button> -->
      <el-button type="primary" size="small" @click="nextStep">{{
        $t("shopProcess.nextStep")
      }}</el-button>
    </div>
  </div>
</template>

<script>
  import {
    validEmail,
    validNoEmptySpace,
    removeHeadAndTailSpaces,
  } from "@/utils/validate";
  import ImgUpload from "@/components/img-upload";
  import { encrypt } from "@/utils/crypto";
  import { convertTimeFormat } from "@/utils";

  export default {
    directives: {
      "el-select-loadmore": {
        bind(el, binding) {
          // 获取element-ui定义好的scroll盒子
          const SELECTWRAP_DOM = el.querySelector(
            ".el-select-dropdown .el-select-dropdown__wrap"
          );
          SELECTWRAP_DOM.addEventListener("scroll", function () {
            /**
             * scrollHeight 获取元素内容高度(只读)
             * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
             * clientHeight 读取元素的可见高度(只读)
             * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
             * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
             */
            const condition =
              this.scrollHeight - this.scrollTop <= this.clientHeight + 0.5;
            if (condition) {
              binding.value();
            }
          });
        },
      },
    },
    components: {
      ImgUpload,
    },
    data() {
      var validPassword = (rule, value, callback) => {
        if (validNoEmptySpace(value)) {
          callback(new Error(this.$t("shopProcess.contentNoNall")));
        } else {
          callback();
        }
      };
      const validateMobile = (rule, value, callback) => {
        let phoneReg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/;
        let mobile = /^(?:(?:\+|00)86)?1\d{10}$/;
        if (phoneReg.test(value) || mobile.test(value)) {
          callback();
        } else {
          callback(new Error(this.$i18n.t("shopProcess.telErrorTips")));
        }
      };
      const validateReceiveMobile = (rule, value, callback) => {
        let phoneReg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/;
        let mobile = /^(?:(?:\+|00)86)?1\d{10}$/;
        if (phoneReg.test(value) || mobile.test(value)) {
          callback();
        } else {
          callback(new Error(this.$i18n.t("brand.receiveMobileInputTip2")));
        }
      };
      const validateEmail = (rule, value, callback) => {
        if (!validEmail(value) || value.indexOf(" ") !== -1) {
          callback(new Error(this.$i18n.t("shopProcess.emailErrorTips")));
        } else {
          callback();
        }
      };
      const validUserName = (rule, value, callback) => {
        const reg = /^(?!\d+$)[a-zA-Z0-9_]{4,16}$/;
        if (value && !reg.test(value)) {
          return callback(new Error(this.$i18n.t("shop.InputCorrectUsername")));
        }
        callback();
      };
      const validShopCode = (rule, value, callback) => {
        const reg = /[\W]/g;
        if (value && reg.test(value)) {
          return callback(new Error(this.$i18n.t("brand.tipsShopCode")));
        }
        callback();
      };
      const validShopLocation = (rule, value, callback) => {
        if (
          value &&
          value.airportShopAddressIds &&
          value.airportShopAddressIds.length
        ) {
          callback();
        } else {
          return callback(new Error(this.$i18n.t("tip.select")));
        }
      };
      return {
        lang: window.localStorage.getItem("o2oLang"),
        removeHeadAndTailSpaces: removeHeadAndTailSpaces,
        serviceTypeArr: [],
        // 选择的承租商值
        selectValue: "",
        // 连锁承租商集合
        brandList: [],
        timer: "",
        // 店铺基本信息
        shopBasicInfo: {
          shopName: "",
          shopAppName: "",
          shopCode: "",
          userName: "",
          password: "",
          shopOwner: "",
          tel: "",
          email: "",
          // shopStatus: "",
          serviceIds: [],
          receiveMobile: "",

          // 营业时间
          openingHours: ["08:00", "20:00"],
          openTime: "08:00",
          closeTime: "20:00",

          // 地区
          province: "",
          provinceId: "",
          city: "",
          cityId: "",
          area: "",
          areaId: "",
          street: "",
          streetId: "",
          currentAddr: "",
          shopAddress: "",
          // 纬度
          shopLat: "",
          // 经度
          shopLng: "",
          // 选择的承租商id
          brandId: "",
          airportShopAddressObj: {},
        },

        shopBasicInfoRules: {
          shopLogo: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.shopLogoTips"),
              trigger: "change",
            },
          ],
          shopName: [
            {
              required: true,
              message: this.$t("shopProcess.shopNoNull"),
              trigger: "blur",
            },
            {
              min: 2,
              max: 10,
              message: this.$t("shopProcess.shopLimits"),
              trigger: "blur",
            },
          ],
          shopAppName: [
            {
              required: true,
              message: this.$t("o2oBrand.o2oBrandNoNull"),
              trigger: "change",
            },
          ],
          shopType: [
            {
              required: true,
              message: this.$t("shopProcess.shopTypeNull"),
              trigger: "change",
            },
          ],
          shopShowingType: [
            {
              required: true,
              message: this.$t("shopProcess.shopShowingTypeNull"),
              trigger: ["blur", "change"],
            },
          ],
          shopLng: [
            {
              required: true,
              message: this.$t("shopProcess.shopLngNull"),
              trigger: "blur",
            },
            {
              pattern: /^-?((1[0-7]|[1-9])?\d(\.\d+)?|180(\.0+)?)$/,
              message: this.$t("shopProcess.shopLngError"),
              trigger: "blur",
            },
          ],
          shopLat: [
            {
              required: true,
              message: this.$t("shopProcess.shopLatNull"),
              trigger: "blur",
            },
            {
              pattern: /^-?([1-8]?\d(\.\d+)?|90(\.0+)?)$/,
              message: this.$t("shopProcess.shopLngError"),
              trigger: "blur",
            },
          ],
          brandTagId: [
            {
              required: true,
              message: this.$t("shopProcess.brandNoNull"),
              trigger: ["blur", "change"],
            },
          ],
          shopCode: [
            {
              required: true,
              // min: 2,
              // max: 20,
              message: this.$t("shopProcess.numberLimits"),
              trigger: "blur",
            },
            { validator: validShopCode, trigger: ["blur", "change"] },
          ],
          currentAddr: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.addrInputTips"),
              trigger: ["blur", "change"],
            },
          ],
          shopAddress: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.detailAddrNotEmpty"),
              trigger: "blur",
            },
          ],
          userName: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.userNameNoNull"),
              trigger: "blur",
            },
            { validator: validUserName, trigger: ["blur", "change"] },
          ],
          shopOwner: [
            {
              required: true,
              message: this.$i18n.t("brand.contactNameNotEmpty"),
              trigger: "blur",
            },
          ],
          password: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.passNoNull"),
              trigger: "blur",
            },
            {
              min: 6,
              max: 16,
              message: this.$i18n.t("shopProcess.passLimit"),
              trigger: ["blur", "change"],
            },
            { validator: validPassword, trigger: ["blur", "change"] },
          ],
          tel: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.telNotEmpty"),
              trigger: "blur",
            },
            { validator: validateMobile, trigger: "blur" },
          ],
          receiveMobile: [
            {
              required: true,
              message: this.$i18n.t("brand.receiveMobileErrorTips"),
              trigger: "blur",
            },
            { validator: validateReceiveMobile, trigger: "blur" },
          ],
          email: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.emailInputTips"),
              trigger: "blur",
            },
            { validator: validateEmail, trigger: "blur" },
          ],
          openingHours: [
            {
              required: true,
              message: this.$i18n.t("outlet.seleBusTime"),
              trigger: ["blur", "change"],
            },
          ],
          // shopStatus: [
          //   {
          //     required: true,
          //     message: this.$i18n.t("shopProcess.statusTxt"),
          //     trigger: ["blur", "change"],
          //   },
          // ],
          _shopTagId: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.selectOutletLabel"),
              trigger: "change",
            },
          ],
          brandId: [
            {
              required: true,
              message: this.$i18n.t("shopProcess.selectBrand"),
              trigger: "change",
            },
          ],
          airportShopAddressObj: [
            {
              required: true,
              validator: validShopLocation,
              trigger: "change",
            },
          ],
        },
        // 省市区
        currentAddr: [], // 选中地址
        addrList: [],
        addrListTreeProps: {
          value: "areaId",
          label: "areaName",
          children: "areas",
          lazy: true,
          lazyLoad: this.lazyLoad,
        },
        // 定位
        show: false,
        center: {
          lng: 121.844124,
          lat: 31.147095,
        },
        center2: {
          lng: 121.844124,
          lat: 31.147095,
        },
        baiduIndex: false,
        zoom: 18,
        mapLocationType: "map", // 定位方式

        searchParam: {
          size: 20,
          current: 1,
          brandName: "",
        },
        brandTotal: "",
        shopLocationProps: {
          label: "name",
          value: "id",
        },
        shopLocationOptions: [], //商铺位置
        brandTagList: [],

        shopTypeList: [
          {
            value: 1,
            label: this.$t("outlet.shopType1"),
          },
          {
            value: 2,
            label: this.$t("outlet.shopType2"),
          },
          {
            value: 3,
            label: this.$t("outlet.shopType3"),
          },
          {
            value: 4,
            label: this.$t("outlet.shopType4"),
          },
          {
            value: 5,
            label: this.$t("outlet.shopType5"),
          },
        ],

        shopTagsListProps: {
          label: "name",
          value: "id",
          children: "secondShopTag",
        },
        shopTagsList: [], //商铺标签
      };
    },
    mounted() {
      this.show = false;
      this.setCenter();
      this.getBrandServiceList();
      this.getBrandList();
      this.queryShopLocation();
      this.getBrandTagChooseList();
      this.queryShopInfoTags();
    },
    methods: {
      convertTimeFormat,
      handleShopTagsListChange(e) {
        this.shopBasicInfo.shopTagId = e[e.length - 1];
      },
      queryShopInfoTags() {
        this.$http({
          url: this.$http.adornUrl(`/platform/shopTag/list`),
          method: "get",
          params: this.$http.adornParams({
            current: 1,
            size: 99999999,
            name: "",
          }),
        }).then(({ data }) => {
          this.shopTagsList = data.records.map((m) => {
            let disabled = !m.secondShopTag;
            return {
              ...m,
              disabled,
            };
          });
        });
      },
      /**
       * /platform/brandTag/choose-list
       */
      getBrandTagChooseList() {
        // /platform/brandTag/choose-list
        this.$http({
          url: this.$http.adornUrl(`/platform/brandTag/choose-list`),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          if (data) {
            this.brandTagList = data;
          }
        });
      },
      /**
       * 图片的值发生改变，重新校验该表单项
       */
      imgsChange(url) {
        console.log("this.shopBasicInfo.shopLogo", this.shopBasicInfo.shopLogo);
        this.shopBasicInfo.shopLogo = url;
      },
      handleInputTel(key) {
        this.shopBasicInfo[key] = this.shopBasicInfo[key].replace(/\D/g, "");
      },
      // 获取商铺位置集联
      queryShopLocation() {
        this.$http({
          url: this.$http.adornUrl(`/admin/platform/airportStation/treeV2`),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          this.shopLocationOptions = data;
          console.log("shopLocationOptions", this.shopLocationOptions);
        });
      },
      handleShopLocationChange(e) {
        let airportShopAddressObj = {
          airportShopAddressIds: [],
          airportShopAddressNames: [],
        };
        let nodes = this.$refs.CascaderShopLocation.getCheckedNodes(true);
        // 反转数组
        let reverseNames = [];
        let node = nodes[0];
        while (node.parent) {
          reverseNames.push(node.label);
          node = node.parent;
        }
        reverseNames.push(node.label);
        airportShopAddressObj.airportShopAddressNames = reverseNames.reverse();
        airportShopAddressObj.airportShopAddressIds = e;
        this.shopBasicInfo.airportShopAddressObj = airportShopAddressObj;
      },
      /**
       *  检索承租商名称
       * @param {String} val 检索字段
       */
      searchBrand(val) {
        if (this.timer) {
          clearTimeout(this.timer);
          this.timer = null;
        }
        this.timer = setTimeout(() => {
          this.emptySearchParam();
          if (val) {
            this.searchParam.brandName = val;
            this.getBrandList();
          } else {
            this.getBrandList();
          }
        }, 500);
      },
      /**
       * 下拉框触发焦点事件
       */
      formInitiation() {
        this.emptySearchParam();
        this.getBrandList();
      },
      /**
       * 初始化搜索数据
       */
      emptySearchParam() {
        this.searchParam.brandName = "";
        this.searchParam.size = 20;
        this.searchParam.current = 1;
        this.brandList = [];
      },
      loadmore() {
        this.searchParam.current++;
        if (this.brandList.length < this.brandTotal) {
          this.getBrandList();
        }
      },
      /**
       * 获取 连锁承租商 列表
       */
      getBrandList() {
        this.$http({
          url: this.$http.adornUrl("/platform/brand/page"),
          method: "get",
          params: this.$http.adornParams(
            Object.assign(this.searchParam, {
              // brandType: 0,
              // 承租商状态(-1:已删除 0: 停业中 1:营业中 2:平台下线 3:平台下线待审核 4:开店申请中 5:开店申请待审核)
              brandStatusList: [0, 1, 2, 3],
            })
          ),
        }).then(({ data }) => {
          if (!data) return;
          this.brandTotal = data.total;
          this.brandList = [...this.brandList, ...data.records];
        });
      },

      /**
       * 选择承租商
       */
      selectChange() {
        // 清空之前选择的门店服务
        this.shopBasicInfo.serviceIds = [];
        this.shopBasicInfo.brandId = this.selectValue;
        sessionStorage.setItem("selectedBrandId", this.selectValue);
        this.getBrandServiceList();
      },
      /**
       * 选择营业时间段
       */
      openingHourChange() {
        this.shopBasicInfo.openTime = this.shopBasicInfo.openingHours[0];
        this.shopBasicInfo.closeTime = this.shopBasicInfo.openingHours[1];
      },
      /**
       * 获取承租商下门店服务列表
       */
      getBrandServiceList() {
        this.$http({
          url: this.$http.adornUrl(`/shop/provision/listAvailableByBrandId`),
          method: "get",
          params: this.$http.adornParams({
            brandId: this.shopBasicInfo.brandId,
          }),
        }).then(({ data }) => {
          if (data) this.serviceTypeArr = data;
        });
      },

      // 联级选择器动态加载
      lazyLoad(node, resolve) {
        if (node.level === 0) {
          this.$http({
            url: this.$http.adornUrl(`/admin/area/list`),
            method: "get",
            params: this.$http.adornParams({ level: 1 }),
          }).then(({ data }) => {
            resolve(data);
          });
        } else {
          this.$http({
            url: this.$http.adornUrl(`/admin/area/listByPid`),
            method: "get",
            params: this.$http.adornParams({ pid: node.value }),
          }).then(({ data }) => {
            let nodes = data.map((item) => {
              return {
                ...item,
                leaf: item.level >= 4,
              };
            });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          });
        }
      },
      /**
       * 监听地址改变
       */
      handleAddrChange(value) {
        if (value.length > 0) {
          const labels =
            this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels;
          this.shopBasicInfo.province = labels[0];
          this.shopBasicInfo.provinceId = value[0];
          this.shopBasicInfo.city = labels[1];
          this.shopBasicInfo.cityId = value[1];
          this.shopBasicInfo.area = labels[2];
          this.shopBasicInfo.areaId = value[2];
          this.shopBasicInfo.street = labels[3];
          this.shopBasicInfo.streetId = value[3];
          this.mapLocation(true);
        }
      },

      handler({ BMap, map }) {
        this.baiduIndex = true;
        this.center = { ...this.center2 };
      },
      /** **************** 地图相关 ****************/
      /**
       * 初始化地图数据
       */
      setCenter() {
        this.center = null;
        this.center = {
          lng: 121.844124,
          lat: 31.147095,
        };
        this.zoom = 18;
      },
      /**
       * 获取地图移动后回调的位置参数
       */
      syncCenterAndZoom(e) {
        this.setCenter();
        const { lng, lat } = e.target.getCenter();
        this.center.lng = lng;
        this.center.lat = lat;
        this.zoom = e.target.getZoom();
        this.shopBasicInfo.shopLng = lng;
        this.shopBasicInfo.shopLat = lat;
      },
      /**
       * 关闭地图说明标签
       */
      infoWindowClose() {
        this.show = false;
      },
      /**
       * 打开地图说明标签
       */
      infoWindowOpen() {
        this.show = true;
      },
      shopAddressChange() {
        this.mapLocation(true);
      },
      // 定位地图
      mapLocation(isTrue) {
        let area = "";
        const that = this;
        if (isTrue === true) {
          // 选择省市区时，定位地图
          if (this.shopBasicInfo.provinceId) {
            area = this.shopBasicInfo.province;
            this.zoom = 6;
            if (this.shopBasicInfo.cityId) {
              area = area + this.shopBasicInfo.city;
              this.zoom = 10;
              if (this.shopBasicInfo.areaId) {
                area = area + this.shopBasicInfo.area;
                this.zoom = 14;
                if (this.shopBasicInfo.streetId) {
                  area = area + this.shopBasicInfo.street;
                  this.zoom = 18;
                  if (this.shopBasicInfo.shopAddress !== null) {
                    // 详细地址
                    area =
                      this.shopBasicInfo.province +
                      this.shopBasicInfo.city +
                      this.shopBasicInfo.area +
                      this.shopBasicInfo.street +
                      this.shopBasicInfo.shopAddress;
                    this.zoom = 20;
                  }
                }
              }
            }
          }
        } else {
          // this.center = null

          // if (!this.shopBasicInfo.provinceId || !this.shopBasicInfo.cityId || !this.shopBasicInfo.areaId || !this.shopBasicInfo.streetId) {
          //   this.shopBasicInfo.shopAddress = null
          //   this.$message({
          //     message: this.$i18n.t('platform.selePCDJ'),
          //     type: 'error',
          //     duration: 1000
          //   })
          //   return
          // }
          console.log(this.center);
          let point = new BMap.Point(this.center.lng, this.center.lat);
          let gc = new BMap.Geocoder();
          gc.getLocation(point, function (rs) {
            that.shopBasicInfo.shopAddress = rs.address.replace(
              that.shopBasicInfo.province +
                that.shopBasicInfo.city +
                that.shopBasicInfo.area +
                that.shopBasicInfo.street,
              ""
            );
          });
          area =
            this.shopBasicInfo.province +
            this.shopBasicInfo.city +
            this.shopBasicInfo.area +
            this.shopBasicInfo.street +
            this.shopBasicInfo.shopAddress;
          this.zoom = 20;
        }
        this.center = area || this.center;
        this.isEditAddr = true;
      },
      /** **************** 地图相关 end*************/
      /**
       * 返回
       */
      backPage() {
        this.$emit("backPage");
      },
      /**
       * 不合规表单数据 拦截
       */
      formVoidInterdiction() {
        let fn = new Promise((resolve, reject) => {
          this.$refs["shopBasicInfo"].validate(async (valid) => {
            valid ? resolve() : reject();
          });
        });
        return fn;
      },
      /**
       * 下一步,提交
       */
      nextStep() {
        this.$refs["shopBasicInfo"].validate((valid) => {
          if (!valid) return;
          let dataForm = JSON.parse(JSON.stringify(this.shopBasicInfo));
          dataForm.password = encrypt(dataForm.password);
          this.testRepetition(dataForm);
        });
      },
      // 校验数据
      testRepetition(dataForm) {
        this.$http({
          url: this.$http.adornUrl("/platform/shop/check"),
          method: "post",
          data: this.$http.adornData({
            shopDetail: dataForm,
            sysType: 1,
          }),
        }).then(({ data }) => {
          this.$emit("nextStep", dataForm);
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .business-info-mod {
    margin-top: 20px;
    & >>> .el-form {
      display: block;
      width: 100%;
      padding: 0 10px;
      .el-form-item {
        margin-bottom: 30px;
      }
    }
    .ci-wrapper {
      display: flex;
      justify-content: flex-start;
      .left-info {
        width: 100%;
        .txt {
          width: 40%;
          min-width: 300px;
        }
        .price-unit-text {
          font-size: 14px;
          color: #666;
          margin-left: 15px;
        }
        // .btn-box {
        //   display: flex;
        //   margin-left: 134px;
        //   margin-bottom: 40px;
        //   .prev-btn {
        //     margin-right: 13px;
        //   }
        // }
      }
      .capital-int {
        & >>> .el-input__inner {
          padding-right: 0 !important;
          border-radius: 2px 0 0 2px !important;
        }
      }
      // 成立日期
      & >>> .el-date-editor.el-input,
      & >>> .el-date-editor.el-input__inner {
        width: 100%;
      }
      // 营业期限
      & >>> .el-range-editor.el-input__inner {
        width: auto;
        .el-range-separator {
          width: 8%;
        }
      }
    }
    .map {
      // width: 100%;
      width: 40%;
      height: 300px;
      margin: 6px 0;
    }
  }
  .foot-btn {
    margin: 30px 140px 30px;
  }
  div ::v-deep .el-form-item__label {
    height: 55px;
    line-height: 55px;
  }

  .ci-wrapper ::v-deep.left-info p,
  .ci-wrapper ::v-deep.left-info .txt {
    height: 55px;
    line-height: 55px;
  }
  div ::v-deep .el-select,
  div ::v-deep .el-cascader--small,
  div ::v-deep .el-input__inner {
    width: 100%;
  }
  div ::v-deep .el-range-editor--small .el-range-separator {
    width: 32px;
    line-height: 30px;
  }
  div ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
  div ::v-deep .el-form-item__error {
    top: 46px;
  }
  div ::v-deep .el-form-item__content .el-input-group {
    vertical-align: 0;
  }
  .addr-select {
    width: 40% !important;
  }
  .shop-logo-img-tip {
    font-size: 12px;
    text-indent: 140px;
    color: #666;
    margin-bottom: 12px;
    margin-top: 10px;
  }
</style>
<style scoped lang="scss">
  ::v-deep .business-info-mod .el-form .el-form-item {
    margin-bottom: 0;
  }

  ::v-deep .shop-logo-class .el-form-item__error {
    top: 175px;
  }
</style>
